<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns:yui="http://yuilibrary.com/rdf/1.0/yui.rdf#">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>API: slider   slider-base.js  (YUI Library)</title>

	<link rel="stylesheet" type="text/css" href="assets/reset-fonts-grids-min.css" />
	<link rel="stylesheet" type="text/css" href="assets/api.css" />

    <script type="text/javascript" src="assets/api-js"></script>
    <script type="text/javascript" src="assets/ac-js"></script>
</head>

<body id="yahoo-com">

<div id="doc3" class="yui-t2">
	<div id="hd">
        <h1><a href="http://developer.yahoo.com/yui/" title="Yahoo! UI Library">Yahoo! UI Library</a></h1>
        <h3>slider&nbsp; <span class="subtitle">3.1.1</span></h3>
        <a href="./index.html" title="Yahoo! UI Library">Yahoo! UI Library</a> 
            &gt; <a href="./module_slider.html" title="slider">slider</a>
                
                 &gt; slider-base.js (source view) 
        <form onsubmit="return false">
            <div id="propertysearch">
                Search: <input autocomplete="off" id="searchinput" />
                <div id="searchresults">
                    &nbsp;
                </div>
            </div>
        </form>
	</div>

	<div id="bd">
		<div id="yui-main">
			<div class="yui-b">
            <form action="#" name="yui-classopts-form" method="get" id="yui-classopts-form">
                <fieldset>
                    <legend>Filters</legend>
                <span class="classopts"><input type="checkbox" name="show_private" id="show_private" /> <label for="show_private">Show Private</label></span>
                <span class="classopts"><input type="checkbox" name="show_protected" id="show_protected" /> <label for="show_protected">Show Protected</label></span>
                <span class="classopts"><input type="checkbox" name="show_deprecated" id="show_deprecated" /> <label for="show_deprecated">Show Deprecated</label></span>
                </fieldset>
            </form>

                    <div id="srcout">
                        <style>
                            #doc3 .classopts { display:none; }
                        </style>
                        <div class="highlight"><pre><span class="cm">/**</span>
<span class="cm"> * Create a sliding value range input visualized as a draggable thumb on a</span>
<span class="cm"> * background element.</span>
<span class="cm"> * </span>
<span class="cm"> * @module slider</span>
<span class="cm"> * @submodule slider-base</span>
<span class="cm"> */</span>

<span class="kd">var</span> <span class="nx">INVALID_VALUE</span> <span class="o">=</span> <span class="nx">Y</span><span class="p">.</span><span class="nx">Attribute</span><span class="p">.</span><span class="nx">INVALID_VALUE</span><span class="p">;</span>

<span class="cm">/**</span>
<span class="cm"> * Create a slider to represent an input control capable of representing a</span>
<span class="cm"> * series of intermediate states based on the position of the slider&#39;s thumb.</span>
<span class="cm"> * These states are typically aligned to a value algorithm whereby the thumb</span>
<span class="cm"> * position corresponds to a given value. Sliders may be oriented vertically or</span>
<span class="cm"> * horizontally, based on the &lt;code&gt;axis&lt;/code&gt; configuration.</span>
<span class="cm"> *</span>
<span class="cm"> * @class SliderBase</span>
<span class="cm"> * @extends Widget</span>
<span class="cm"> * @param config {Object} Configuration object</span>
<span class="cm"> * @constructor</span>
<span class="cm"> */</span>
<span class="kd">function</span> <span class="nx">SliderBase</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">SliderBase</span><span class="p">.</span><span class="nx">superclass</span><span class="p">.</span><span class="nx">constructor</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span> <span class="k">this</span><span class="p">,</span> <span class="nx">arguments</span> <span class="p">);</span>
<span class="p">}</span>

<span class="nx">Y</span><span class="p">.</span><span class="nx">SliderBase</span> <span class="o">=</span> <span class="nx">Y</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span> <span class="nx">SliderBase</span><span class="p">,</span> <span class="nx">Y</span><span class="p">.</span><span class="nx">Widget</span><span class="p">,</span> <span class="p">{</span>

    <span class="c1">// Y.Slider prototype</span>

    <span class="cm">/**</span>
<span class="cm">     * Construction logic executed during Slider instantiation.</span>
<span class="cm">     *</span>
<span class="cm">     * @method initializer</span>
<span class="cm">     * @protected</span>
<span class="cm">     */</span>
    <span class="nx">initializer</span> <span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="cm">/**</span>
<span class="cm">         * The configured axis, stored for fast lookup since it&#39;s a writeOnce</span>
<span class="cm">         * attribute.  This is for use by extension classes.  For</span>
<span class="cm">         * implementation code, use &lt;code&gt;get( &amp;quot;axis&amp;quot; )&lt;/code&gt; for</span>
<span class="cm">         * authoritative source.  Never write to this property.</span>
<span class="cm">         *</span>
<span class="cm">         * @property axis</span>
<span class="cm">         * @type {String}</span>
<span class="cm">         * @protected</span>
<span class="cm">         */</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">axis</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span> <span class="s1">&#39;axis&#39;</span> <span class="p">);</span>

        <span class="cm">/**</span>
<span class="cm">         * Cached fast access map for DOM properties and attributes that</span>
<span class="cm">         * pertain to accessing dimensional or positioning information</span>
<span class="cm">         * according to the Slider&#39;s axis (e.g. &amp;quot;height&amp;quot; vs.</span>
<span class="cm">         * &amp;quot;width&amp;quot;).  Extension classes should add to this collection</span>
<span class="cm">         * for axis related strings if necessary.</span>
<span class="cm">         *</span>
<span class="cm">         * @property _key</span>
<span class="cm">         * @type {Object}</span>
<span class="cm">         * @protected</span>
<span class="cm">         */</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">_key</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">dim</span>    <span class="o">:</span> <span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">axis</span> <span class="o">===</span> <span class="s1">&#39;y&#39;</span> <span class="p">)</span> <span class="o">?</span> <span class="s1">&#39;height&#39;</span> <span class="o">:</span> <span class="s1">&#39;width&#39;</span><span class="p">,</span>
            <span class="nx">minEdge</span><span class="o">:</span> <span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">axis</span> <span class="o">===</span> <span class="s1">&#39;y&#39;</span> <span class="p">)</span> <span class="o">?</span> <span class="s1">&#39;top&#39;</span>    <span class="o">:</span> <span class="s1">&#39;left&#39;</span><span class="p">,</span>
            <span class="nx">maxEdge</span><span class="o">:</span> <span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">axis</span> <span class="o">===</span> <span class="s1">&#39;y&#39;</span> <span class="p">)</span> <span class="o">?</span> <span class="s1">&#39;bottom&#39;</span> <span class="o">:</span> <span class="s1">&#39;right&#39;</span><span class="p">,</span>
            <span class="nx">xyIndex</span><span class="o">:</span> <span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">axis</span> <span class="o">===</span> <span class="s1">&#39;y&#39;</span> <span class="p">)</span> <span class="o">?</span> <span class="mi">1</span> <span class="o">:</span> <span class="mi">0</span>
        <span class="p">};</span>

        <span class="cm">/**</span>
<span class="cm">         * Signals that the thumb has moved.  Payload includes the thumb&#39;s</span>
<span class="cm">         * pixel offset from the top/left edge of the rail, and if triggered by</span>
<span class="cm">         * dragging the thumb, the &lt;code&gt;drag:drag&lt;/code&gt; event.</span>
<span class="cm">         *</span>
<span class="cm">         * @event thumbMove</span>
<span class="cm">         * @param event {Event} The event object for the thumbMove with the</span>
<span class="cm">         *                      following extra properties:</span>
<span class="cm">         *  &lt;dl&gt;</span>
<span class="cm">         *      &lt;dt&gt;offset&lt;/dt&gt;</span>
<span class="cm">         *          &lt;dd&gt;Pixel offset from top/left of the slider to the new</span>
<span class="cm">         *          thumb position&lt;/dd&gt;</span>
<span class="cm">         *      &lt;dt&gt;ddEvent&lt;/dt&gt;</span>
<span class="cm">         *          &lt;dd&gt;&lt;code&gt;drag:drag&lt;/code&gt; event from the thumb&lt;/dd&gt;</span>
<span class="cm">         *  &lt;/dl&gt;</span>
<span class="cm">         */</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">publish</span><span class="p">(</span> <span class="s1">&#39;thumbMove&#39;</span><span class="p">,</span> <span class="p">{</span>
            <span class="nx">defaultFn</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">_defThumbMoveFn</span><span class="p">,</span>
            <span class="nx">queuable</span> <span class="o">:</span> <span class="kc">true</span>
        <span class="p">}</span> <span class="p">);</span>
    <span class="p">},</span>

    <span class="cm">/**</span>
<span class="cm">     * Create the DOM structure for the Slider.</span>
<span class="cm">     *</span>
<span class="cm">     * @method renderUI</span>
<span class="cm">     * @protected</span>
<span class="cm">     */</span>
    <span class="nx">renderUI</span> <span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">contentBox</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span> <span class="s1">&#39;contentBox&#39;</span> <span class="p">);</span>

        <span class="cm">/**</span>
<span class="cm">         * The Node instance of the Slider&#39;s rail element.  Do not write to</span>
<span class="cm">         * this property.</span>
<span class="cm">         *</span>
<span class="cm">         * @property rail</span>
<span class="cm">         * @type {Node}</span>
<span class="cm">         */</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">rail</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">renderRail</span><span class="p">();</span>

        <span class="k">this</span><span class="p">.</span><span class="nx">_uiSetRailLength</span><span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span> <span class="s1">&#39;length&#39;</span> <span class="p">)</span> <span class="p">);</span>

        <span class="cm">/**</span>
<span class="cm">         * The Node instance of the Slider&#39;s thumb element.  Do not write to</span>
<span class="cm">         * this property.</span>
<span class="cm">         *</span>
<span class="cm">         * @property thumb</span>
<span class="cm">         * @type {Node}</span>
<span class="cm">         */</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">thumb</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">renderThumb</span><span class="p">();</span>

        <span class="k">this</span><span class="p">.</span><span class="nx">rail</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">thumb</span> <span class="p">);</span>
        <span class="c1">// @TODO: insert( contentBox, &#39;replace&#39; ) or setContent?</span>
        <span class="nx">contentBox</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">rail</span> <span class="p">);</span>

        <span class="c1">// &lt;span class=&quot;yui3-slider-x&quot;&gt;</span>
        <span class="nx">contentBox</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">getClassName</span><span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">axis</span> <span class="p">)</span> <span class="p">);</span>
    <span class="p">},</span>

    <span class="cm">/**</span>
<span class="cm">     * Creates the Slider rail DOM subtree for insertion into the Slider&#39;s</span>
<span class="cm">     * &lt;code&gt;contentBox&lt;/code&gt;.  Override this method if you want to provide</span>
<span class="cm">     * the rail element (presumably from existing markup).</span>
<span class="cm">     *</span>
<span class="cm">     * @method renderRail</span>
<span class="cm">     * @return {Node} the rail node subtree</span>
<span class="cm">     */</span>
    <span class="nx">renderRail</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">minCapClass</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getClassName</span><span class="p">(</span> <span class="s1">&#39;rail&#39;</span><span class="p">,</span> <span class="s1">&#39;cap&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_key</span><span class="p">.</span><span class="nx">minEdge</span> <span class="p">),</span>
            <span class="nx">maxCapClass</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getClassName</span><span class="p">(</span> <span class="s1">&#39;rail&#39;</span><span class="p">,</span> <span class="s1">&#39;cap&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_key</span><span class="p">.</span><span class="nx">maxEdge</span> <span class="p">);</span>

        <span class="k">return</span> <span class="nx">Y</span><span class="p">.</span><span class="nx">Node</span><span class="p">.</span><span class="nx">create</span><span class="p">(</span>
            <span class="nx">Y</span><span class="p">.</span><span class="nx">substitute</span><span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">RAIL_TEMPLATE</span><span class="p">,</span> <span class="p">{</span>
                <span class="nx">railClass</span>      <span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">getClassName</span><span class="p">(</span> <span class="s1">&#39;rail&#39;</span> <span class="p">),</span>
                <span class="nx">railMinCapClass</span><span class="o">:</span> <span class="nx">minCapClass</span><span class="p">,</span>
                <span class="nx">railMaxCapClass</span><span class="o">:</span> <span class="nx">maxCapClass</span>
            <span class="p">}</span> <span class="p">)</span> <span class="p">);</span>
    <span class="p">},</span>

    <span class="cm">/**</span>
<span class="cm">     * Sets the rail length according to the &lt;code&gt;length&lt;/code&gt; attribute.</span>
<span class="cm">     *</span>
<span class="cm">     * @method _uiSetRailLength</span>
<span class="cm">     * @param length {String} the length to apply to the rail style</span>
<span class="cm">     * @protected</span>
<span class="cm">     */</span>
    <span class="nx">_uiSetRailLength</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span> <span class="nx">length</span> <span class="p">)</span> <span class="p">{</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">rail</span><span class="p">.</span><span class="nx">setStyle</span><span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">_key</span><span class="p">.</span><span class="nx">dim</span><span class="p">,</span> <span class="nx">length</span> <span class="p">);</span>
    <span class="p">},</span>

    <span class="cm">/**</span>
<span class="cm">     * Creates the Slider thumb DOM subtree for insertion into the Slider&#39;s</span>
<span class="cm">     * rail.  Override this method if you want to provide the thumb element</span>
<span class="cm">     * (presumably from existing markup).</span>
<span class="cm">     *</span>
<span class="cm">     * @method renderThumb</span>
<span class="cm">     * @return {Node} the thumb node subtree</span>
<span class="cm">     */</span>
    <span class="nx">renderThumb</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">_initThumbUrl</span><span class="p">();</span>

        <span class="kd">var</span> <span class="nx">imageUrl</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span> <span class="s1">&#39;thumbUrl&#39;</span> <span class="p">);</span>

        <span class="k">return</span> <span class="nx">Y</span><span class="p">.</span><span class="nx">Node</span><span class="p">.</span><span class="nx">create</span><span class="p">(</span>
            <span class="nx">Y</span><span class="p">.</span><span class="nx">substitute</span><span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">THUMB_TEMPLATE</span><span class="p">,</span> <span class="p">{</span>
                <span class="nx">thumbClass</span>      <span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">getClassName</span><span class="p">(</span> <span class="s1">&#39;thumb&#39;</span> <span class="p">),</span>
                <span class="nx">thumbShadowClass</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">getClassName</span><span class="p">(</span> <span class="s1">&#39;thumb&#39;</span><span class="p">,</span> <span class="s1">&#39;shadow&#39;</span> <span class="p">),</span>
                <span class="nx">thumbImageClass</span> <span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">getClassName</span><span class="p">(</span> <span class="s1">&#39;thumb&#39;</span><span class="p">,</span> <span class="s1">&#39;image&#39;</span> <span class="p">),</span>
                <span class="nx">thumbShadowUrl</span>  <span class="o">:</span> <span class="nx">imageUrl</span><span class="p">,</span>
                <span class="nx">thumbImageUrl</span>   <span class="o">:</span> <span class="nx">imageUrl</span>
            <span class="p">}</span> <span class="p">)</span> <span class="p">);</span>
    <span class="p">},</span>

    <span class="cm">/**</span>
<span class="cm">     * Creates the Y.DD.Drag instance used to handle the thumb movement and</span>
<span class="cm">     * binds Slider interaction to the configured value model.</span>
<span class="cm">     *</span>
<span class="cm">     * @method bindUI</span>
<span class="cm">     * @protected</span>
<span class="cm">     */</span>
    <span class="nx">bindUI</span> <span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">_bindThumbDD</span><span class="p">();</span>

        <span class="k">this</span><span class="p">.</span><span class="nx">_bindValueLogic</span><span class="p">();</span>

        <span class="k">this</span><span class="p">.</span><span class="nx">after</span><span class="p">(</span> <span class="s1">&#39;disabledChange&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_afterDisabledChange</span> <span class="p">);</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">after</span><span class="p">(</span> <span class="s1">&#39;lengthChange&#39;</span><span class="p">,</span>   <span class="k">this</span><span class="p">.</span><span class="nx">_afterLengthChange</span> <span class="p">);</span>
    <span class="p">},</span>

    <span class="cm">/**</span>
<span class="cm">     * Makes the thumb draggable and constrains it to the rail.</span>
<span class="cm">     *</span>
<span class="cm">     * @method _bindThumbDD</span>
<span class="cm">     * @protected</span>
<span class="cm">     */</span>
    <span class="nx">_bindThumbDD</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">config</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">constrain</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">rail</span> <span class="p">};</span>
        
        <span class="c1">// { constrain: rail, stickX: true }</span>
        <span class="nx">config</span><span class="p">[</span> <span class="s1">&#39;stick&#39;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">axis</span><span class="p">.</span><span class="nx">toUpperCase</span><span class="p">()</span> <span class="p">]</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>

        <span class="cm">/** </span>
<span class="cm">         * The DD.Drag instance linked to the thumb node.</span>
<span class="cm">         *</span>
<span class="cm">         * @property _dd</span>
<span class="cm">         * @type {DD.Drag}</span>
<span class="cm">         * @protected</span>
<span class="cm">         */</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">_dd</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Y</span><span class="p">.</span><span class="nx">DD</span><span class="p">.</span><span class="nx">Drag</span><span class="p">(</span> <span class="p">{</span>
            <span class="nx">node</span>   <span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">thumb</span><span class="p">,</span>
            <span class="nx">bubble</span> <span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
            <span class="nx">on</span>     <span class="o">:</span> <span class="p">{</span>
                <span class="s1">&#39;drag:start&#39;</span><span class="o">:</span> <span class="nx">Y</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">_onDragStart</span><span class="p">,</span> <span class="k">this</span> <span class="p">)</span>
            <span class="p">},</span>
            <span class="nx">after</span>  <span class="o">:</span> <span class="p">{</span>
                <span class="s1">&#39;drag:drag&#39;</span><span class="o">:</span> <span class="nx">Y</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">_afterDrag</span><span class="p">,</span>    <span class="k">this</span> <span class="p">),</span>
                <span class="s1">&#39;drag:end&#39;</span> <span class="o">:</span> <span class="nx">Y</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">_afterDragEnd</span><span class="p">,</span> <span class="k">this</span> <span class="p">)</span>
            <span class="p">}</span>
        <span class="p">}</span> <span class="p">);</span>

        <span class="c1">// Constrain the thumb to the rail</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">_dd</span><span class="p">.</span><span class="nx">plug</span><span class="p">(</span> <span class="nx">Y</span><span class="p">.</span><span class="nx">Plugin</span><span class="p">.</span><span class="nx">DDConstrained</span><span class="p">,</span> <span class="nx">config</span> <span class="p">);</span>
    <span class="p">},</span>

    <span class="cm">/**</span>
<span class="cm">     * Stub implementation.  Override this (presumably in a class extension) to</span>
<span class="cm">     * initialize any value logic that depends on the presence of the Drag</span>
<span class="cm">     * instance.</span>
<span class="cm">     *</span>
<span class="cm">     * @method _bindValueLogic</span>
<span class="cm">     * @protected</span>
<span class="cm">     */</span>
    <span class="nx">_bindValueLogic</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{},</span>

    <span class="cm">/**</span>
<span class="cm">     * Moves the thumb to pixel offset position along the rail.</span>
<span class="cm">     *</span>
<span class="cm">     * @method _uiMoveThumb</span>
<span class="cm">     * @param offset {Number} the pixel offset to set as left or top style</span>
<span class="cm">     * @protected</span>
<span class="cm">     */</span>
    <span class="nx">_uiMoveThumb</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span> <span class="nx">offset</span> <span class="p">)</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">thumb</span> <span class="p">)</span> <span class="p">{</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">thumb</span><span class="p">.</span><span class="nx">setStyle</span><span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">_key</span><span class="p">.</span><span class="nx">minEdge</span><span class="p">,</span> <span class="nx">offset</span> <span class="o">+</span> <span class="s1">&#39;px&#39;</span> <span class="p">);</span>

            <span class="nx">Y</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Setting thumb &quot;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">_key</span><span class="p">.</span><span class="nx">minEdge</span> <span class="o">+</span> <span class="s2">&quot; to &quot;</span> <span class="o">+</span> <span class="nx">offset</span> <span class="o">+</span> <span class="s2">&quot;px&quot;</span><span class="p">,</span><span class="s2">&quot;info&quot;</span><span class="p">,</span><span class="s2">&quot;slider&quot;</span><span class="p">);</span>

            <span class="k">this</span><span class="p">.</span><span class="nx">fire</span><span class="p">(</span> <span class="s1">&#39;thumbMove&#39;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">offset</span><span class="o">:</span> <span class="nx">offset</span> <span class="p">}</span> <span class="p">);</span>
        <span class="p">}</span>
    <span class="p">},</span>

    <span class="cm">/**</span>
<span class="cm">     * Dispatches the &lt;code&gt;slideStart&lt;/code&gt; event.</span>
<span class="cm">     *</span>
<span class="cm">     * @method _onDragStart</span>
<span class="cm">     * @param e {Event} the &lt;code&gt;drag:start&lt;/code&gt; event from the thumb</span>
<span class="cm">     * @protected</span>
<span class="cm">     */</span>
    <span class="nx">_onDragStart</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span> <span class="nx">e</span> <span class="p">)</span> <span class="p">{</span>
        <span class="cm">/**</span>
<span class="cm">         * Signals the beginning of a thumb drag operation.  Payload includes</span>
<span class="cm">         * the thumb&#39;s drag:start event.</span>
<span class="cm">         *</span>
<span class="cm">         * @event slideStart</span>
<span class="cm">         * @param event {Event} The event object for the slideStart with the</span>
<span class="cm">         *                      following extra properties:</span>
<span class="cm">         *  &lt;dl&gt;</span>
<span class="cm">         *      &lt;dt&gt;ddEvent&lt;/dt&gt;</span>
<span class="cm">         *          &lt;dd&gt;&lt;code&gt;drag:start&lt;/code&gt; event from the thumb&lt;/dd&gt;</span>
<span class="cm">         *  &lt;/dl&gt;</span>
<span class="cm">         */</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">fire</span><span class="p">(</span> <span class="s1">&#39;slideStart&#39;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">ddEvent</span><span class="o">:</span> <span class="nx">e</span> <span class="p">}</span> <span class="p">);</span>
    <span class="p">},</span>

    <span class="cm">/**</span>
<span class="cm">     * Dispatches the &lt;code&gt;thumbMove&lt;/code&gt; event.</span>
<span class="cm">     *</span>
<span class="cm">     * @method _afterDrag</span>
<span class="cm">     * @param e {Event} the &lt;code&gt;drag:drag&lt;/code&gt; event from the thumb</span>
<span class="cm">     * @protected</span>
<span class="cm">     */</span>
    <span class="nx">_afterDrag</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span> <span class="nx">e</span> <span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">thumbXY</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">info</span><span class="p">.</span><span class="nx">xy</span><span class="p">[</span> <span class="k">this</span><span class="p">.</span><span class="nx">_key</span><span class="p">.</span><span class="nx">xyIndex</span> <span class="p">],</span>
            <span class="nx">railXY</span>  <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">con</span><span class="p">.</span><span class="nx">_regionCache</span><span class="p">[</span> <span class="k">this</span><span class="p">.</span><span class="nx">_key</span><span class="p">.</span><span class="nx">minEdge</span> <span class="p">];</span>

        <span class="nx">Y</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Thumb position: &quot;</span> <span class="o">+</span> <span class="nx">thumbXY</span> <span class="o">+</span> <span class="s2">&quot;, Rail position: &quot;</span> <span class="o">+</span> <span class="nx">railXY</span><span class="p">,</span> <span class="s2">&quot;info&quot;</span><span class="p">,</span> <span class="s2">&quot;slider&quot;</span><span class="p">);</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">fire</span><span class="p">(</span> <span class="s1">&#39;thumbMove&#39;</span><span class="p">,</span> <span class="p">{</span>
            <span class="nx">offset</span> <span class="o">:</span> <span class="p">(</span><span class="nx">thumbXY</span> <span class="o">-</span> <span class="nx">railXY</span><span class="p">),</span>
            <span class="nx">ddEvent</span><span class="o">:</span> <span class="nx">e</span>
        <span class="p">}</span> <span class="p">);</span>
    <span class="p">},</span>

    <span class="cm">/**</span>
<span class="cm">     * Dispatches the &lt;code&gt;slideEnd&lt;/code&gt; event.</span>
<span class="cm">     *</span>
<span class="cm">     * @method _onDragEnd</span>
<span class="cm">     * @param e {Event} the &lt;code&gt;drag:end&lt;/code&gt; event from the thumb</span>
<span class="cm">     * @protected</span>
<span class="cm">     */</span>
    <span class="nx">_afterDragEnd</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span> <span class="nx">e</span> <span class="p">)</span> <span class="p">{</span>
        <span class="cm">/**</span>
<span class="cm">         * Signals the end of a thumb drag operation.  Payload includes</span>
<span class="cm">         * the thumb&#39;s drag:end event.</span>
<span class="cm">         *</span>
<span class="cm">         * @event slideStart</span>
<span class="cm">         * @param event {Event} The event object for the slideEnd with the</span>
<span class="cm">         *                      following extra properties:</span>
<span class="cm">         *  &lt;dl&gt;</span>
<span class="cm">         *      &lt;dt&gt;ddEvent&lt;/dt&gt;</span>
<span class="cm">         *          &lt;dd&gt;&lt;code&gt;drag:end&lt;/code&gt; event from the thumb&lt;/dd&gt;</span>
<span class="cm">         *  &lt;/dl&gt;</span>
<span class="cm">         */</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">fire</span><span class="p">(</span> <span class="s1">&#39;slideEnd&#39;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">ddEvent</span><span class="o">:</span> <span class="nx">e</span> <span class="p">}</span> <span class="p">);</span>
    <span class="p">},</span>

    <span class="cm">/**</span>
<span class="cm">     * Locks or unlocks the thumb.</span>
<span class="cm">     *</span>
<span class="cm">     * @method _afterDisabledChange</span>
<span class="cm">     * @param e {Event} The disabledChange event object</span>
<span class="cm">     * @protected</span>
<span class="cm">     */</span>
    <span class="nx">_afterDisabledChange</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span> <span class="nx">e</span> <span class="p">)</span> <span class="p">{</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">_dd</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span> <span class="s1">&#39;lock&#39;</span><span class="p">,</span> <span class="nx">e</span><span class="p">.</span><span class="nx">newVal</span> <span class="p">);</span>
    <span class="p">},</span>

    <span class="cm">/**</span>
<span class="cm">     * Handles changes to the &lt;code&gt;length&lt;/code&gt; attribute.  By default, it</span>
<span class="cm">     * triggers an update to the UI.</span>
<span class="cm">     *</span>
<span class="cm">     * @method _afterLengthChange</span>
<span class="cm">     * @param e {Event} The lengthChange event object</span>
<span class="cm">     * @protected</span>
<span class="cm">     */</span>
    <span class="nx">_afterLengthChange</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span> <span class="nx">e</span> <span class="p">)</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span> <span class="s1">&#39;rendered&#39;</span> <span class="p">)</span> <span class="p">)</span> <span class="p">{</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">_uiSetRailLength</span><span class="p">(</span> <span class="nx">e</span><span class="p">.</span><span class="nx">newVal</span> <span class="p">);</span>

            <span class="k">this</span><span class="p">.</span><span class="nx">syncUI</span><span class="p">();</span>
        <span class="p">}</span>
    <span class="p">},</span>

    <span class="cm">/**</span>
<span class="cm">     * Synchronizes the DOM state with the attribute settings.</span>
<span class="cm">     *</span>
<span class="cm">     * @method syncUI</span>
<span class="cm">     */</span>
    <span class="nx">syncUI</span> <span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">_dd</span><span class="p">.</span><span class="nx">con</span><span class="p">.</span><span class="nx">resetCache</span><span class="p">();</span>

        <span class="k">this</span><span class="p">.</span><span class="nx">_syncThumbPosition</span><span class="p">();</span>

        <span class="c1">// Forces a reflow of the bounding box to address IE8 inline-block</span>
        <span class="c1">// container not expanding correctly. bug 2527905</span>
        <span class="c1">//this.get(&#39;boundingBox&#39;).toggleClass(&#39;&#39;);</span>
    <span class="p">},</span>

    <span class="cm">/**</span>
<span class="cm">     * Stub implementation.  Override this (presumably in a class extension) to</span>
<span class="cm">     * ensure the thumb is in the correct position according to the value</span>
<span class="cm">     * alogorithm.</span>
<span class="cm">     * instance.</span>
<span class="cm">     *</span>
<span class="cm">     * @method _syncThumbPosition</span>
<span class="cm">     * @protected</span>
<span class="cm">     */</span>
    <span class="nx">_syncThumbPosition</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{},</span>

    <span class="cm">/**</span>
<span class="cm">     * Validates the axis is &amp;quot;x&amp;quot; or &amp;quot;y&amp;quot; (case insensitive).</span>
<span class="cm">     * Converts to lower case for storage.</span>
<span class="cm">     *</span>
<span class="cm">     * @method _setAxis</span>
<span class="cm">     * @param v {String} proposed value for the axis attribute</span>
<span class="cm">     * @return {String} lowercased first character of the input string</span>
<span class="cm">     * @protected</span>
<span class="cm">     */</span>
    <span class="nx">_setAxis</span> <span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">v</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">v</span> <span class="o">=</span> <span class="p">(</span> <span class="nx">v</span> <span class="o">+</span> <span class="s1">&#39;&#39;</span> <span class="p">).</span><span class="nx">toLowerCase</span><span class="p">();</span>

        <span class="k">return</span> <span class="p">(</span> <span class="nx">v</span> <span class="o">===</span> <span class="s1">&#39;x&#39;</span> <span class="o">||</span> <span class="nx">v</span> <span class="o">===</span> <span class="s1">&#39;y&#39;</span> <span class="p">)</span> <span class="o">?</span> <span class="nx">v</span> <span class="o">:</span> <span class="nx">INVALID_VALUE</span><span class="p">;</span>
    <span class="p">},</span>

    <span class="cm">/** </span>
<span class="cm">     * Ensures the stored length value is a string with a quantity and unit.</span>
<span class="cm">     * Unit will be defaulted to &amp;quot;px&amp;quot; if not included.  Rejects</span>
<span class="cm">     * values less than or equal to 0 and those that don&#39;t at least start with</span>
<span class="cm">     * a number.</span>
<span class="cm">     *</span>
<span class="cm">     * @method _setLength</span>
<span class="cm">     * @param v {String} proposed value for the length attribute</span>
<span class="cm">     * @return {String} the sanitized value</span>
<span class="cm">     * @protected</span>
<span class="cm">     */</span>
    <span class="nx">_setLength</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span> <span class="nx">v</span> <span class="p">)</span> <span class="p">{</span>
        <span class="nx">v</span> <span class="o">=</span> <span class="p">(</span> <span class="nx">v</span> <span class="o">+</span> <span class="s1">&#39;&#39;</span> <span class="p">).</span><span class="nx">toLowerCase</span><span class="p">();</span>

        <span class="kd">var</span> <span class="nx">length</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span> <span class="nx">v</span><span class="p">,</span> <span class="mi">10</span> <span class="p">),</span>
            <span class="nx">units</span>  <span class="o">=</span> <span class="nx">v</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span> <span class="sr">/[\d\.\-]/g</span><span class="p">,</span> <span class="s1">&#39;&#39;</span> <span class="p">)</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">DEF_UNIT</span><span class="p">;</span>

        <span class="k">return</span> <span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span> <span class="o">?</span> <span class="p">(</span> <span class="nx">length</span> <span class="o">+</span> <span class="nx">units</span> <span class="p">)</span> <span class="o">:</span> <span class="nx">INVALID_VALUE</span><span class="p">;</span>
    <span class="p">},</span>

    <span class="cm">/**</span>
<span class="cm">     * &lt;p&gt;Defaults the thumbURL attribute according to the current skin, or</span>
<span class="cm">     * &amp;quot;sam&amp;quot; if none can be determined.  Horizontal Sliders will have</span>
<span class="cm">     * their &lt;code&gt;thumbUrl&lt;/code&gt; attribute set to&lt;/p&gt;</span>
<span class="cm">     * &lt;p&gt;&lt;code&gt;&amp;quot;/&lt;em&gt;configured&lt;/em&gt;/&lt;em&gt;yu&lt;/em&gt;i/&lt;em&gt;builddi&lt;/em&gt;r/slider/assets/skins/sam/thumb-x.png&amp;quot;&lt;/code&gt;&lt;/p&gt;</span>
<span class="cm">     * &lt;p&gt;And vertical thumbs will get&lt;/p&gt;</span>
<span class="cm">     * &lt;p&gt;&lt;code&gt;&amp;quot;/&lt;em&gt;configured&lt;/em&gt;/&lt;em&gt;yui&lt;/em&gt;/&lt;em&gt;builddir&lt;/em&gt;/slider/assets/skins/sam/thumb-y.png&amp;quot;&lt;/code&gt;&lt;/p&gt;</span>
<span class="cm">     *</span>
<span class="cm">     * @method _initThumbUrl</span>
<span class="cm">     * @protected</span>
<span class="cm">     */</span>
    <span class="nx">_initThumbUrl</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">url</span>     <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span> <span class="s1">&#39;thumbUrl&#39;</span> <span class="p">),</span>
            <span class="nx">skin</span>    <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getSkinName</span><span class="p">()</span> <span class="o">||</span> <span class="s1">&#39;sam&#39;</span><span class="p">,</span>
            <span class="nx">skinDir</span> <span class="o">=</span> <span class="nx">Y</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">base</span> <span class="o">+</span> <span class="s1">&#39;slider/assets/skins/&#39;</span> <span class="o">+</span> <span class="nx">skin</span><span class="p">;</span>

        <span class="k">if</span> <span class="p">(</span> <span class="o">!</span><span class="nx">url</span> <span class="p">)</span> <span class="p">{</span>
            <span class="c1">// &lt;img src=&quot;/path/to/build/slider/assets/skins/sam/thumb-x.png&quot;&gt;</span>
            <span class="nx">url</span> <span class="o">=</span> <span class="nx">skinDir</span> <span class="o">+</span> <span class="s1">&#39;/thumb-&#39;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">axis</span> <span class="o">+</span> <span class="s1">&#39;.png&#39;</span><span class="p">;</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span> <span class="s1">&#39;thumbUrl&#39;</span><span class="p">,</span> <span class="nx">url</span> <span class="p">);</span>
        <span class="p">}</span>
    <span class="p">},</span>

    <span class="cm">/**</span>
<span class="cm">     * Bounding box template that will contain the Slider&#39;s DOM subtree.  &amp;lt;span&amp;gt;s are used to support inline-block styling.</span>
<span class="cm">     *</span>
<span class="cm">     * @property BOUNDING_TEMPLATE</span>
<span class="cm">     * @type {String}</span>
<span class="cm">     * @default &amp;lt;span&gt;&amp;lt;/span&gt;</span>
<span class="cm">     */</span>
    <span class="nx">BOUNDING_TEMPLATE</span> <span class="o">:</span> <span class="s1">&#39;&lt;span&gt;&lt;/span&gt;&#39;</span><span class="p">,</span>

    <span class="cm">/**</span>
<span class="cm">     * Content box template that will contain the Slider&#39;s rail and thumb.</span>
<span class="cm">     *</span>
<span class="cm">     * @property CONTENT_TEMPLATE</span>
<span class="cm">     * @type {String}</span>
<span class="cm">     * @default &amp;lt;span&gt;&amp;lt;/span&gt;</span>
<span class="cm">     */</span>
    <span class="nx">CONTENT_TEMPLATE</span>  <span class="o">:</span> <span class="s1">&#39;&lt;span&gt;&lt;/span&gt;&#39;</span><span class="p">,</span>

    <span class="cm">/**</span>
<span class="cm">     * Rail template that will contain the end caps and the thumb.</span>
<span class="cm">     * {placeholder}s are used for template substitution at render time.</span>
<span class="cm">     *</span>
<span class="cm">     * @property RAIL_TEMPLATE</span>
<span class="cm">     * @type {String}</span>
<span class="cm">     * @default &amp;lt;span class=&quot;{railClass}&quot;&gt;&amp;lt;span class=&quot;{railMinCapClass}&quot;&gt;&amp;lt;/span&gt;&amp;lt;span class=&quot;{railMaxCapClass}&quot;&gt;&amp;lt;/span&gt;&amp;lt;/span&gt;</span>
<span class="cm">     */</span>
    <span class="nx">RAIL_TEMPLATE</span>     <span class="o">:</span> <span class="s1">&#39;&lt;span class=&quot;{railClass}&quot;&gt;&#39;</span> <span class="o">+</span>
                            <span class="s1">&#39;&lt;span class=&quot;{railMinCapClass}&quot;&gt;&lt;/span&gt;&#39;</span> <span class="o">+</span>
                            <span class="s1">&#39;&lt;span class=&quot;{railMaxCapClass}&quot;&gt;&lt;/span&gt;&#39;</span> <span class="o">+</span>
                        <span class="s1">&#39;&lt;/span&gt;&#39;</span><span class="p">,</span>

    <span class="cm">/**</span>
<span class="cm">     * Thumb template that will contain the thumb image and shadow. &amp;lt;img&gt;</span>
<span class="cm">     * tags are used instead of background images to avoid a flicker bug in IE.</span>
<span class="cm">     * {placeholder}s are used for template substitution at render time.</span>
<span class="cm">     *</span>
<span class="cm">     * @property THUMB_TEMPLATE</span>
<span class="cm">     * @type {String}</span>
<span class="cm">     * @default &amp;lt;span class=&quot;{thumbClass}&quot; tabindex=&quot;-1&quot;&gt;&amp;lt;img src=&quot;{thumbShadowUrl}&quot; alt=&quot;Slider thumb shadow&quot; class=&quot;{thumbShadowClass}&quot;&gt;&amp;lt;img src=&quot;{thumbImageUrl}&quot; alt=&quot;Slider thumb&quot; class=&quot;{thumbImageClass}&quot;&gt;&amp;lt;/span&gt;</span>
<span class="cm">     */</span>
    <span class="nx">THUMB_TEMPLATE</span>    <span class="o">:</span> <span class="s1">&#39;&lt;span class=&quot;{thumbClass}&quot; tabindex=&quot;-1&quot;&gt;&#39;</span> <span class="o">+</span>
                            <span class="s1">&#39;&lt;img src=&quot;{thumbShadowUrl}&quot; &#39;</span> <span class="o">+</span>
                                <span class="s1">&#39;alt=&quot;Slider thumb shadow&quot; &#39;</span> <span class="o">+</span>
                                <span class="s1">&#39;class=&quot;{thumbShadowClass}&quot;&gt;&#39;</span> <span class="o">+</span>
                            <span class="s1">&#39;&lt;img src=&quot;{thumbImageUrl}&quot; &#39;</span> <span class="o">+</span>
                                <span class="s1">&#39;alt=&quot;Slider thumb&quot; &#39;</span> <span class="o">+</span>
                                <span class="s1">&#39;class=&quot;{thumbImageClass}&quot;&gt;&#39;</span> <span class="o">+</span>
                        <span class="s1">&#39;&lt;/span&gt;&#39;</span>

<span class="p">},</span> <span class="p">{</span>

    <span class="c1">// Y.SliderBase static properties</span>

    <span class="cm">/**</span>
<span class="cm">     * The identity of the widget.</span>
<span class="cm">     *</span>
<span class="cm">     * @property SliderBase.NAME</span>
<span class="cm">     * @type String</span>
<span class="cm">     * @default &#39;sliderBase&#39;</span>
<span class="cm">     * @readOnly</span>
<span class="cm">     * @protected</span>
<span class="cm">     * @static</span>
<span class="cm">     */</span>
    <span class="nx">NAME</span> <span class="o">:</span> <span class="s1">&#39;sliderBase&#39;</span><span class="p">,</span>

    <span class="cm">/**</span>
<span class="cm">     * Static property used to define the default attribute configuration of</span>
<span class="cm">     * the Widget.</span>
<span class="cm">     *</span>
<span class="cm">     * @property SliderBase.ATTRS</span>
<span class="cm">     * @type {Object}</span>
<span class="cm">     * @protected</span>
<span class="cm">     * @static</span>
<span class="cm">     */</span>
    <span class="nx">ATTRS</span> <span class="o">:</span> <span class="p">{</span>

        <span class="cm">/**</span>
<span class="cm">         * Axis upon which the Slider&#39;s thumb moves.  &amp;quot;x&amp;quot; for</span>
<span class="cm">         * horizontal, &amp;quot;y&amp;quot; for vertical.</span>
<span class="cm">         *</span>
<span class="cm">         * @attribute axis</span>
<span class="cm">         * @type {String}</span>
<span class="cm">         * @default &amp;quot;x&amp;quot;</span>
<span class="cm">         * @writeOnce</span>
<span class="cm">         */</span>
        <span class="nx">axis</span> <span class="o">:</span> <span class="p">{</span>
            <span class="nx">value</span>     <span class="o">:</span> <span class="s1">&#39;x&#39;</span><span class="p">,</span>
            <span class="nx">writeOnce</span> <span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
            <span class="nx">setter</span>    <span class="o">:</span> <span class="s1">&#39;_setAxis&#39;</span><span class="p">,</span>
            <span class="nx">lazyAdd</span>   <span class="o">:</span> <span class="kc">false</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * The length of the rail (exclusive of the end caps if positioned by</span>
<span class="cm">         * CSS).  This corresponds to the movable range of the thumb.</span>
<span class="cm">         *</span>
<span class="cm">         * @attribute length</span>
<span class="cm">         * @type {String | Number} e.g. &quot;200px&quot;, &quot;6em&quot;, or 200 (defaults to px)</span>
<span class="cm">         * @default 150px</span>
<span class="cm">         */</span>
        <span class="nx">length</span><span class="o">:</span> <span class="p">{</span>
            <span class="nx">value</span><span class="o">:</span> <span class="s1">&#39;150px&#39;</span><span class="p">,</span>
            <span class="nx">setter</span><span class="o">:</span> <span class="s1">&#39;_setLength&#39;</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Path to the thumb image.  This will be used as both the thumb and</span>
<span class="cm">         * shadow as a sprite.  Defaults at render() to thumb-x.png or</span>
<span class="cm">         * thumb-y.png in the skin directory of the current skin.</span>
<span class="cm">         *</span>
<span class="cm">         * @attribute thumbUrl</span>
<span class="cm">         * @type {String}</span>
<span class="cm">         * @default thumb-x.png or thumb-y.png in the sam skin directory of the</span>
<span class="cm">         *          current build path for Slider</span>
<span class="cm">         */</span>
        <span class="nx">thumbUrl</span><span class="o">:</span> <span class="p">{</span>
            <span class="nx">value</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
            <span class="nx">validator</span><span class="o">:</span> <span class="nx">Y</span><span class="p">.</span><span class="nx">Lang</span><span class="p">.</span><span class="nx">isString</span>
        <span class="p">}</span>
    <span class="p">}</span>
<span class="p">});</span>
</pre></div>

                    </div>
			</div>
		</div>
		<div class="yui-b">
            <div class="nav">

                    <div id="moduleList" class="module">
                        <h4>Modules</h4>
                        <ul class="content">
                                <li class=""><a href="module_align-plugin.html" title="align-plugin">align-plugin</a></li>
                                <li class=""><a href="module_anim.html" title="anim">anim</a></li>
                                <li class=""><a href="module_async-queue.html" title="async-queue">async-queue</a></li>
                                <li class=""><a href="module_attribute.html" title="attribute">attribute</a></li>
                                <li class=""><a href="module_base.html" title="base">base</a></li>
                                <li class=""><a href="module_cache.html" title="cache">cache</a></li>
                                <li class=""><a href="module_classnamemanager.html" title="classnamemanager">classnamemanager</a></li>
                                <li class=""><a href="module_collection.html" title="collection">collection</a></li>
                                <li class=""><a href="module_console.html" title="console">console</a></li>
                                <li class=""><a href="module_console-filters.html" title="console-filters">console-filters</a></li>
                                <li class=""><a href="module_cookie.html" title="cookie">cookie</a></li>
                                <li class=""><a href="module_dataschema.html" title="dataschema">dataschema</a></li>
                                <li class=""><a href="module_datasource.html" title="datasource">datasource</a></li>
                                <li class=""><a href="module_datatype.html" title="datatype">datatype</a></li>
                                <li class=""><a href="module_dd.html" title="dd">dd</a></li>
                                <li class=""><a href="module_dom.html" title="dom">dom</a></li>
                                <li class=""><a href="module_dump.html" title="dump">dump</a></li>
                                <li class=""><a href="module_event.html" title="event">event</a></li>
                                <li class=""><a href="module_event-custom.html" title="event-custom">event-custom</a></li>
                                <li class=""><a href="module_event-simulate.html" title="event-simulate">event-simulate</a></li>
                                <li class=""><a href="module_history.html" title="history">history</a></li>
                                <li class=""><a href="module_imageloader.html" title="imageloader">imageloader</a></li>
                                <li class=""><a href="module_intl.html" title="intl">intl</a></li>
                                <li class=""><a href="module_io.html" title="io">io</a></li>
                                <li class=""><a href="module_json.html" title="json">json</a></li>
                                <li class=""><a href="module_loader.html" title="loader">loader</a></li>
                                <li class=""><a href="module_node.html" title="node">node</a></li>
                                <li class=""><a href="module_node-focusmanager.html" title="node-focusmanager">node-focusmanager</a></li>
                                <li class=""><a href="module_node-menunav.html" title="node-menunav">node-menunav</a></li>
                                <li class=""><a href="module_oop.html" title="oop">oop</a></li>
                                <li class=""><a href="module_overlay.html" title="overlay">overlay</a></li>
                                <li class=""><a href="module_plugin.html" title="plugin">plugin</a></li>
                                <li class=""><a href="module_pluginhost.html" title="pluginhost">pluginhost</a></li>
                                <li class=""><a href="module_profiler.html" title="profiler">profiler</a></li>
                                <li class=""><a href="module_querystring.html" title="querystring">querystring</a></li>
                                <li class=""><a href="module_queue-promote.html" title="queue-promote">queue-promote</a></li>
                                <li class=""><a href="module_shim-plugin.html" title="shim-plugin">shim-plugin</a></li>
                                <li class="selected"><a href="module_slider.html" title="slider">slider</a></li>
                                <li class=""><a href="module_sortable.html" title="sortable">sortable</a></li>
                                <li class=""><a href="module_stylesheet.html" title="stylesheet">stylesheet</a></li>
                                <li class=""><a href="module_substitute.html" title="substitute">substitute</a></li>
                                <li class=""><a href="module_swf.html" title="swf">swf</a></li>
                                <li class=""><a href="module_swfdetect.html" title="swfdetect">swfdetect</a></li>
                                <li class=""><a href="module_tabview.html" title="tabview">tabview</a></li>
                                <li class=""><a href="module_test.html" title="test">test</a></li>
                                <li class=""><a href="module_widget.html" title="widget">widget</a></li>
                                <li class=""><a href="module_widget-anim.html" title="widget-anim">widget-anim</a></li>
                                <li class=""><a href="module_widget-child.html" title="widget-child">widget-child</a></li>
                                <li class=""><a href="module_widget-locale.html" title="widget-locale">widget-locale</a></li>
                                <li class=""><a href="module_widget-parent.html" title="widget-parent">widget-parent</a></li>
                                <li class=""><a href="module_widget-position.html" title="widget-position">widget-position</a></li>
                                <li class=""><a href="module_widget-position-align.html" title="widget-position-align">widget-position-align</a></li>
                                <li class=""><a href="module_widget-position-constrain.html" title="widget-position-constrain">widget-position-constrain</a></li>
                                <li class=""><a href="module_widget-stack.html" title="widget-stack">widget-stack</a></li>
                                <li class=""><a href="module_widget-stdmod.html" title="widget-stdmod">widget-stdmod</a></li>
                                <li class=""><a href="module_yui.html" title="yui">yui</a></li>
                        </ul>
                    </div>

                    <div id="classList" class="module">
                        <h4>Classes</h4>
                        <ul class="content">
                                <li class=""><a href="ClickableRail.html" title="ClickableRail">ClickableRail</a></li>
                                <li class=""><a href="Slider.html" title="Slider">Slider</a></li>
                                <li class=""><a href="SliderBase.html" title="SliderBase">SliderBase</a></li>
                                <li class=""><a href="SliderValueRange.html" title="SliderValueRange">SliderValueRange</a></li>
                        </ul>
                    </div>

                    <div id="fileList" class="module">
                        <h4>Files</h4>
                        <ul class="content">        
                                <li class=""><a href="clickable-rail.js.html" title="clickable-rail.js">clickable-rail.js</a></li>
                                <li class=""><a href="range-slider.js.html" title="range-slider.js">range-slider.js</a></li>
                                <li class="selected"><a href="slider-base.js.html" title="slider-base.js">slider-base.js</a></li>
                                <li class=""><a href="value-range.js.html" title="value-range.js">value-range.js</a></li>
                        </ul>
                    </div>





            </div>
		</div>
	</div>
	<div id="ft">
        <hr />
        Copyright &copy; 2010 Yahoo! Inc. All rights reserved.
	</div>
</div>
<script type="text/javascript">

    var ALL_YUI_PROPS = [{"access": "protected", "host": "SliderBase", "name": "_afterDisabledChange", "url": "SliderBase.html#method__afterDisabledChange", "type": "method"}, {"access": "protected", "host": "SliderBase", "name": "_afterDrag", "url": "SliderBase.html#method__afterDrag", "type": "method"}, {"access": "protected", "host": "SliderBase", "name": "_afterLengthChange", "url": "SliderBase.html#method__afterLengthChange", "type": "method"}, {"access": "protected", "host": "SliderValueRange", "name": "_afterMaxChange", "url": "SliderValueRange.html#method__afterMaxChange", "type": "method"}, {"access": "protected", "host": "SliderValueRange", "name": "_afterMinChange", "url": "SliderValueRange.html#method__afterMinChange", "type": "method"}, {"access": "protected", "host": "SliderValueRange", "name": "_afterValueChange", "url": "SliderValueRange.html#method__afterValueChange", "type": "method"}, {"access": "protected", "host": "SliderValueRange", "name": "ATTRS", "url": "SliderValueRange.html#property_ATTRS", "type": "property"}, {"access": "protected", "host": "SliderBase", "name": "axis", "url": "SliderBase.html#property_axis", "type": "property"}, {"access": "", "host": "SliderBase", "name": "axis", "url": "SliderBase.html#config_axis", "type": "config"}, {"access": "", "host": "SliderBase", "name": "axisChange", "url": "SliderBase.html#event_axisChange", "type": "event"}, {"access": "protected", "host": "ClickableRail", "name": "_bindClickableRail", "url": "ClickableRail.html#method__bindClickableRail", "type": "method"}, {"access": "protected", "host": "SliderBase", "name": "_bindThumbDD", "url": "SliderBase.html#method__bindThumbDD", "type": "method"}, {"access": "protected", "host": "SliderBase", "name": "bindUI", "url": "SliderBase.html#method_bindUI", "type": "method"}, {"access": "protected", "host": "SliderBase", "name": "_bindValueLogic", "url": "SliderBase.html#method__bindValueLogic", "type": "method"}, {"access": "protected", "host": "SliderValueRange", "name": "_bindValueLogic", "url": "SliderValueRange.html#method__bindValueLogic", "type": "method"}, {"access": "", "host": "SliderBase", "name": "BOUNDING_TEMPLATE", "url": "SliderBase.html#property_BOUNDING_TEMPLATE", "type": "property"}, {"access": "protected", "host": "SliderValueRange", "name": "_calculateFactor", "url": "SliderValueRange.html#method__calculateFactor", "type": "method"}, {"access": "", "host": "ClickableRail", "name": "clickableRail", "url": "ClickableRail.html#config_clickableRail", "type": "config"}, {"access": "", "host": "ClickableRail", "name": "clickableRailChange", "url": "ClickableRail.html#event_clickableRailChange", "type": "event"}, {"access": "", "host": "SliderBase", "name": "CONTENT_TEMPLATE", "url": "SliderBase.html#property_CONTENT_TEMPLATE", "type": "property"}, {"access": "protected", "host": "SliderBase", "name": "_dd", "url": "SliderBase.html#property__dd", "type": "property"}, {"access": "protected", "host": "ClickableRail", "name": "_defRailMouseDownFn", "url": "ClickableRail.html#method__defRailMouseDownFn", "type": "method"}, {"access": "protected", "host": "SliderValueRange", "name": "_defThumbMoveFn", "url": "SliderValueRange.html#method__defThumbMoveFn", "type": "method"}, {"access": "protected", "host": "SliderValueRange", "name": "_factor", "url": "SliderValueRange.html#property__factor", "type": "property"}, {"access": "protected", "host": "ClickableRail", "name": "_getThumbDestination", "url": "ClickableRail.html#method__getThumbDestination", "type": "method"}, {"access": "", "host": "SliderValueRange", "name": "getValue", "url": "SliderValueRange.html#method_getValue", "type": "method"}, {"access": "protected", "host": "ClickableRail", "name": "_initClickableRail", "url": "ClickableRail.html#method__initClickableRail", "type": "method"}, {"access": "protected", "host": "SliderBase", "name": "initializer", "url": "SliderBase.html#method_initializer", "type": "method"}, {"access": "protected", "host": "SliderValueRange", "name": "_initSliderValueRange", "url": "SliderValueRange.html#method__initSliderValueRange", "type": "method"}, {"access": "protected", "host": "SliderBase", "name": "_initThumbUrl", "url": "SliderBase.html#method__initThumbUrl", "type": "method"}, {"access": "protected", "host": "SliderBase", "name": "_key", "url": "SliderBase.html#property__key", "type": "property"}, {"access": "", "host": "SliderBase", "name": "length", "url": "SliderBase.html#config_length", "type": "config"}, {"access": "", "host": "SliderBase", "name": "lengthChange", "url": "SliderBase.html#event_lengthChange", "type": "event"}, {"access": "", "host": "SliderValueRange", "name": "max", "url": "SliderValueRange.html#config_max", "type": "config"}, {"access": "", "host": "SliderValueRange", "name": "maxChange", "url": "SliderValueRange.html#event_maxChange", "type": "event"}, {"access": "", "host": "SliderValueRange", "name": "min", "url": "SliderValueRange.html#config_min", "type": "config"}, {"access": "", "host": "SliderValueRange", "name": "minChange", "url": "SliderValueRange.html#event_minChange", "type": "event"}, {"access": "protected", "host": "SliderValueRange", "name": "_nearestValue", "url": "SliderValueRange.html#method__nearestValue", "type": "method"}, {"access": "protected", "host": "SliderValueRange", "name": "_offsetToValue", "url": "SliderValueRange.html#method__offsetToValue", "type": "method"}, {"access": "protected", "host": "SliderBase", "name": "_onDragEnd", "url": "SliderBase.html#method__onDragEnd", "type": "method"}, {"access": "protected", "host": "SliderBase", "name": "_onDragStart", "url": "SliderBase.html#method__onDragStart", "type": "method"}, {"access": "protected", "host": "ClickableRail", "name": "_onRailMouseDown", "url": "ClickableRail.html#method__onRailMouseDown", "type": "method"}, {"access": "", "host": "SliderBase", "name": "rail", "url": "SliderBase.html#property_rail", "type": "property"}, {"access": "", "host": "ClickableRail", "name": "railMouseDown", "url": "ClickableRail.html#event_railMouseDown", "type": "event"}, {"access": "", "host": "SliderBase", "name": "RAIL_TEMPLATE", "url": "SliderBase.html#property_RAIL_TEMPLATE", "type": "property"}, {"access": "", "host": "SliderBase", "name": "renderRail", "url": "SliderBase.html#method_renderRail", "type": "method"}, {"access": "", "host": "SliderBase", "name": "renderThumb", "url": "SliderBase.html#method_renderThumb", "type": "method"}, {"access": "protected", "host": "SliderBase", "name": "renderUI", "url": "SliderBase.html#method_renderUI", "type": "method"}, {"access": "protected", "host": "ClickableRail", "name": "_resolveThumb", "url": "ClickableRail.html#method__resolveThumb", "type": "method"}, {"access": "protected", "host": "SliderBase", "name": "_setAxis", "url": "SliderBase.html#method__setAxis", "type": "method"}, {"access": "protected", "host": "SliderBase", "name": "_setLength", "url": "SliderBase.html#method__setLength", "type": "method"}, {"access": "protected", "host": "SliderValueRange", "name": "_setNewValue", "url": "SliderValueRange.html#method__setNewValue", "type": "method"}, {"access": "protected", "host": "SliderValueRange", "name": "_setPosition", "url": "SliderValueRange.html#method__setPosition", "type": "method"}, {"access": "", "host": "SliderValueRange", "name": "setValue", "url": "SliderValueRange.html#method_setValue", "type": "method"}, {"access": "protected", "host": "SliderBase", "name": "SliderBase.ATTRS", "url": "SliderBase.html#property_SliderBase.ATTRS", "type": "property"}, {"access": "protected", "host": "SliderBase", "name": "SliderBase.NAME", "url": "SliderBase.html#property_SliderBase.NAME", "type": "property"}, {"access": "", "host": "SliderBase", "name": "slideStart", "url": "SliderBase.html#event_slideStart", "type": "event"}, {"access": "protected", "host": "SliderBase", "name": "_syncThumbPosition", "url": "SliderBase.html#method__syncThumbPosition", "type": "method"}, {"access": "protected", "host": "SliderValueRange", "name": "_syncThumbPosition", "url": "SliderValueRange.html#method__syncThumbPosition", "type": "method"}, {"access": "", "host": "SliderBase", "name": "syncUI", "url": "SliderBase.html#method_syncUI", "type": "method"}, {"access": "", "host": "SliderBase", "name": "thumb", "url": "SliderBase.html#property_thumb", "type": "property"}, {"access": "", "host": "SliderBase", "name": "thumbMove", "url": "SliderBase.html#event_thumbMove", "type": "event"}, {"access": "", "host": "SliderBase", "name": "THUMB_TEMPLATE", "url": "SliderBase.html#property_THUMB_TEMPLATE", "type": "property"}, {"access": "", "host": "SliderBase", "name": "thumbUrl", "url": "SliderBase.html#config_thumbUrl", "type": "config"}, {"access": "", "host": "SliderBase", "name": "thumbUrlChange", "url": "SliderBase.html#event_thumbUrlChange", "type": "event"}, {"access": "protected", "host": "SliderBase", "name": "_uiMoveThumb", "url": "SliderBase.html#method__uiMoveThumb", "type": "method"}, {"access": "protected", "host": "SliderBase", "name": "_uiSetRailLength", "url": "SliderBase.html#method__uiSetRailLength", "type": "method"}, {"access": "protected", "host": "ClickableRail", "name": "_unbindClickableRail", "url": "ClickableRail.html#method__unbindClickableRail", "type": "method"}, {"access": "protected", "host": "SliderValueRange", "name": "_validateNewMax", "url": "SliderValueRange.html#method__validateNewMax", "type": "method"}, {"access": "protected", "host": "SliderValueRange", "name": "_validateNewMin", "url": "SliderValueRange.html#method__validateNewMin", "type": "method"}, {"access": "", "host": "SliderValueRange", "name": "value", "url": "SliderValueRange.html#config_value", "type": "config"}, {"access": "", "host": "SliderValueRange", "name": "valueChange", "url": "SliderValueRange.html#event_valueChange", "type": "event"}, {"access": "protected", "host": "SliderValueRange", "name": "_valueToOffset", "url": "SliderValueRange.html#method__valueToOffset", "type": "method"}, {"access": "protected", "host": "SliderValueRange", "name": "_verifyValue", "url": "SliderValueRange.html#method__verifyValue", "type": "method"}];
</script>
</body>
</html>
